<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <title>Table</title>
  <style type="text/css" media="screen">
    body {
      margin: 1px;
      padding: 5px;
    }

    table {
      border: 2px solid #000;
    }

    th, td {
      border: 1px solid #000;
      width: 100px;
      height: 100px;
    }

    #marker {
      position: absolute;
      border: 2px solid #000;
      width: 50px;
      height: 50px;
      background: #ccc;
    }
  </style>
  <script type="text/javascript" src="../dist/jsTemplate.js"></script>
  <script type="text/javascript">

    function parse() {
      var template1 = document.getElementById("xmlTemplate").value;
      document.getElementById("adiv").innerHTML = jsTemplate.parseXml(template1);
    }


    var books = {books:[
      {name:"Pro JavaScript Design Patterns",price:100,authors:[{name:"Ross Harmes"},{name:"Dustin Diaz"}]},
      {name:"JavaScript: The Good Parts",price:19.2,authors:[{name:"Douglas Crockford"}]},
      {name:"Java编程思想（第4版）",price:108,authors:[{name:"（美）埃克尔"}]},
      {name:"梦断代码",price:49,authors:[{name:"Scott Rosenberg"}]},
      {name:"JavaScript王者归来",price:86,authors:[{name:"月影"}]}
    ]
    };
    function getAuthors(authors) {
      var authorName = "";
      for (var i = 0; i < authors.length; i++) {
        authorName += authors[i].name + ",";
      }
      return  authorName.substring(0, authorName.length - 1);
    }
    var bookName = "Book Name";
    var para1 = "true";
    var para2 = "true";
    var para3 = "false";
  </script>
</head>

<body>
<button id="doit" onclick="parse()">Do It</button>

<div id="adiv">

</div>

<textarea id="xmlTemplate" style="display:none">
  <div>
    <if>if:shouldn't show</if>
    <if test="#{para1==para2}">if:should show</if>
    <if test="#{para1==para3}">if:shouldn't show</if>
    <br/>
    <choose>
      <when test="#{para1==para2}">choose:should show</when>
      <when test="#{para1==para3}">choose:shouldn't show</when>
      <otherwise>choose:shouldn't show</otherwise>
    </choose>
    <br/>
    <choose>
      <when test="#{para1==para3}">choose:shouldn't show</when>
      <otherwise>choose:should show</otherwise>
    </choose>
    <br/>
    <table>
      <tr>
        <th>#{bookName}</th>
        <th>Price</th>
        <th>Author</th>
      </tr>
      <forEach var="book" items="#{books.books}" varStatus="status">
        <tr id="tr_#{status.index}">
          <td>#{book.name}</td>
          <td align="right">#{book.price}</td>
          <td nowrap="nowrap">#{getAuthors(book.authors)}</td>
        </tr>
      </forEach>
    </table>
  </div>
</textarea>


<pre>
  javaScript:

  function parse() {
    var template1 = document.getElementById("xmlTemplate").value;
    document.getElementById("adiv").innerHTML = jsTemplate.parseXml(template1);
  }


  template:

  &lt;div&gt;
    &lt;if&gt;if:shouldn't show&lt;/if&gt;
    &lt;if test="#{para1==para2}"&gt;if:should show&lt;/if&gt;
    &lt;if test="#{para1==para3}"&gt;if:shouldn't show&lt;/if&gt;
    &lt;br/&gt;
    &lt;choose&gt;
      &lt;when test="#{para1==para2}"&gt;choose:should show&lt;/when&gt;
      &lt;when test="#{para1==para3}"&gt;choose:shouldn't show&lt;/when&gt;
      &lt;otherwise&gt;choose:shouldn't show&lt;/otherwise&gt;
    &lt;/choose&gt;
    &lt;br/&gt;
    &lt;choose&gt;
      &lt;when test="#{para1==para3}"&gt;choose:shouldn't show&lt;/when&gt;
      &lt;otherwise&gt;choose:should show&lt;/otherwise&gt;
    &lt;/choose&gt;
    &lt;br/&gt;
    &lt;table&gt;
      &lt;tr&gt;
        &lt;th&gt;#{bookName}&lt;/th&gt;
        &lt;th&gt;Price&lt;/th&gt;
        &lt;th&gt;Author&lt;/th&gt;
      &lt;/tr&gt;
      &lt;forEach var="book" items="#{books.books}" varStatus="status"&gt;
        &lt;tr id="tr_#{status.index}"&gt;
          &lt;td&gt;#{book.name}&lt;/td&gt;
          &lt;td align="right"&gt;#{book.price}&lt;/td&gt;
          &lt;td nowrap="nowrap"&gt;#{getAuthors(book.authors)}&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/forEach&gt;
    &lt;/table&gt;
  &lt;/div&gt;
</pre>

</body>
</html>

